<template>
	<view class="mord">
		<div class="ao" v-for='(l,ind) in data.dat'>
			<div class="top">
				<img :src="l.DefaultImage" alt="">
				<p>{{l.cProductName}}</p>
			</div>
			<div class="stars">
				<p>商品评价</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choise(index,ind)" class="flex-item iconfont" v-for="(item,index) in clicked_list">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</div>
			<div class="stars">
				<p>物流服务</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choiseb(index,ind)" class="flex-item iconfont" v-for="(item,index) in clicked_listb">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</div>
			<div class="stars">
				<p>服务态度</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choisec(index,ind)" class="flex-item iconfont" v-for="(item,index) in clicked_listc">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</div>
			<div class="text">
				<h1>输入评论</h1>
				<textarea v-model="cons.models[ind].cComment" placeholder="多行输入多行输入多行输入" />
			</div>
			<div class="text">
				<h1>上传图片</h1>
				<div class="imgbox">
					<div class="box">
						<img v-for='l in imgbox' :src="l" alt="">
						<div class="add" @click='upload'>
							<img src="../../static/img/1/jia.png" alt="">
						</div>
					</div>
					
				</div>
			</div>
			<div class="text">
				<checkbox-group @change="che($event,ind)">
					<label>
						<checkbox value="1" /><text>匿名评价</text>
					</label>
				</checkbox-group>
			</div>
			
		</div>
		<a class="sub" @click='sub'>
			提交评价
		</a>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				data: null,
				clicked_list: [false, false, false, false, false], //对应星星个数
				clicked_listc: [false, false, false, false, false], //对应星星个数
				clicked_listb: [false, false, false, false, false], //对应星星个数
				cComment:'',
				imgbox:[],
				cons:{
					isMember: true,
							 models: [
							  
							]
						  }
			}
		},
		onLoad(options) {
			var that = this;
			this.data = JSON.parse(options.data);
			var da={
				cOrderNo:'',
							  cComment: "",
							  commentPics: "",
							  iOrderDetail_Id: '',
							  iOrder_Id: '',
							  iProductSKU_Id: '',
							  iProduct_Id: '',
							  iStars: 5,
							  iType: 20,
							  isAnonymous: false,
							  logisticStars: 5,
							  serviceStars: 5
							  }
							
			for(var i=0;i<JSON.parse(options.data).dat.length;i++){
				da.cOrderNo=JSON.parse(options.data).dat[i].cOrderNo;
				da.iOrderDetail_Id=JSON.parse(options.data).dat[i].id;
				da.iOrder_Id=JSON.parse(options.data).id;
				da.iProduct_Id=JSON.parse(options.data).dat[i].iProductId;
				da.iProductSKU_Id=JSON.parse(options.data).dat[i].iSKUId;
				that.cons.models.push(da)
			}
			
		},
		onShow() {},
		methods: {
			sub(){
				var that = this;
				that.$Request.post(
				that.$api.httpApi.user.saveBatch+'&token='+that.$SysCache.get('token'),
				that.cons
				).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:'评价成功！'
						})
						uni.navigateBack({
							delta:1
						})
					}
				});
			},
			che(e,ind){
				if(e.detail.value[0] == 1){
					this.cons.models[ind].isAnonymous = true
				}else{
					this.cons.models[ind].isAnonymous = false
				}
			},
			// upload : function(){
			//    var _self = this;
			//    uni.chooseImage({
			//     count: 10,
			//     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//     sourceType: ['album'], //从相册选择
			//     success: function (res) {
			//      const tempFilePaths = res.tempFilePaths;
			//      const uploadTask = uni.uploadFile({
			//       url : '/dpc/client/FileUpload/uploadWx',
			//       filePath: tempFilePaths[0],
			//       name: 'file',
			//       success: function (uploadFileRes) {
			//        console.log(uploadFileRes);
			//       }
			//      });
			 
			//     },
			//     error : function(e){
			//      console.log(e);
			//     }
			//    });
			//   },
			//starIcon
			starIcon(item) {
				if (item) {
					return '&#xe601;'
				} else {
					return '&#xe602;'
				}
			},
			//点击选择
			choise(num,ind) {
				console.log(ind)
				// num 为点击的星星在数组中的下标
				this.clicked_list = [false, false, false, false, false];
				num = num + 1;
				for (let i = 0; i < num; i++) {
					this.clicked_list[i] = true;
				}
				this.cons.models[ind].iStars = num
			},
			//点击选择
			choiseb(num,ind) {
				// num 为点击的星星在数组中的下标
				this.clicked_listb = [false, false, false, false, false];
				num = num + 1;
				for (let i = 0; i < num; i++) {
					this.clicked_listb[i] = true;
				}
				this.cons.models[ind].logisticStars = num
			},
			//点击选择
			choisec(num,ind) {
				// num 为点击的星星在数组中的下标
				this.clicked_listc = [false, false, false, false, false];
				num = num + 1;
				for (let i = 0; i < num; i++) {
					this.clicked_listc[i] = true;
				}
				this.cons.models[ind].serviceStars = num
			}
		},



	}
</script>

<style scoped>
	 /* uni-checkbox-group{ width: 100% !important; } */
	uni-checkbox-group uni-label{ width: 33% !important;  margin-bottom: 20rpx; vertical-align: middle;}
	/*checkbox 选项框大小  */
	uni-checkbox .uni-checkbox-input{ width: 30rpx !important; height: 30rpx !important; }
	/*checkbox选中后样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{ background: #4DC897; border-color:#4DC897; }
	/*checkbox选中后图标样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
	    width: 20rpx;
	    height: 20rpx;  
		line-height: 20rpx;
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		background: transparent;
		// transform: translate(-70%, -50%) scale(1);
		// -webkit-transform: translate(-70%, -50%) scale(1);
		}
	.sub{
		display: block;
		width:90%;
		height:94rpx;
		background:rgba(77,200,151,1);
		border-radius:47rpx;
		margin: auto;
		text-align: center;
		line-height: 94rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}
	.imgbox{
		margin-top: 40rpx;
	}
	.imgbox .add{
		width: 188rpx;
		height: 188rpx;
		display: inline-block;
		vertical-align: middle;
		 margin-top: 25rpx; 
	}
	.imgbox .box{
		display: inline-block;
		vertical-align: middle;
	}
	.imgbox .box img{
		display: inline-block;
		vertical-align: middle;
		width:188rpx;
		height: 188rpx;
		margin-right: 35rpx;
		margin-top: 25rpx;
	}
	.imgbox .add img{
		display: inline-block;
		vertical-align: middle;
		width:188rpx;
		margin-top: 0;
		height: 188rpx;
	}
	.text{
		margin-top: 50rpx;
	}
	.text text{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(133,133,133,1);
		margin-left: 15rpx;
	}
	
	.text textarea{
		width:100%;
		height:270rpx;
		border:1px solid rgba(229,229,229,1);
		border-radius:10rpx;
		margin-top: 25rpx;
		padding: 27rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(149,149,149,1);
	}
	.text h1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(29,29,29,1);
		padding-left: 25rpx;
	}
	.stars {
		margin-bottom: 43rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(36, 36, 36, 1);

	}

	.stars p {
		display: inline-block;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot');
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.svg#font_family') format('svg');
	}

	.iconfont {
		//与上方font-family 保持一致
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	.star.uni-common-mt {
		box-sizing: border-box;
		/* width: 100%; */
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		/* padding: 0 50rpx; */


	}

	.flex-item {
		display: inline-block;
		width: 60rpx;
		color: #999;

	}

	.starIcon {
		font-size: 40rpx;
	}

	.starActive {
		color: #ff8000;
	}

	.mord {
		height: 100%;
		overflow: auto;
		background: #fff;
	}

	.ao {
		width: 90%;
		margin: auto;
	}

	.top {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		margin-bottom: 50rpx;
	}

	.top img {
		display: inline-block;
		vertical-align: top;
		width: 144rpx;
		height: 144rpx;
	}

	.top p {
		margin-left: 34rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		display: inline-block;
		vertical-align: top;
	}
</style>
